<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form表单</title>
	</head>
	<body>
		<form>
		<!--type="text"普通文本 placehoder->提示输入的内容-->
		<input type="text" placeholder="请输入用户名" name="用户名">
		<!--type="password"密码-->
		<input type="password" placeholder="请输入密码"/>
		<!--纯数字-->
		<input type="number" placeholder="请输入数量"/>
		<!--日期-->
		<input type="date" placeholder="请输入出生年月日期"/>
		<!--input radio设置单选 再用name来分成不同的组 相同的name的值相同时单选一个其他几个就不会被选-->
		<!--value的值是代表具体的某一项 外面的则是给用户看的-->
		<input type="radio" name="sex" value="other"/> 其他
		<input type="radio" name="sex" value="female" />男		
		<input type="radio" name="sex" value="male" />女
		<!--多选-->
		<input type="checkbox" name="hobby" value="run" />跑步
		<input type="checkbox" name="hobby" value="basketball" />篮球
		<!--下拉列表-->
		<select name="zhuanye">
			<option value="rjjs">软件专业</option>
			<option value="hlw">互联网</option>
		</select>
		<!--大文本框-->
		<textarea placeholder="简单介绍一下" rows="10"></textarea>
		<!--按钮-->
		<input type="button" value="提交" id="btn"/>
		<!--上传文件-->
		<input type="file" name="file"/>
		</form>
	</body>
	<script>
		window.onload = function(){
			let abc = document.getElementById('btn')
			abc.onclick= function(){
				let oMap = new Map()
				oMap.set('female',男)
				oMap.set('male',女)
				oMap.set('other',其他)
				let oSex = document.getElementsByName('sex')
				oSex.forEach(item=>{
					if(item.checked){
						let oValue = item.value()
						console.log(oMap.get(oValue))
						document.getElementById('result'),innerText = oMap.get(oValue)}
//						if(oValue ==='female')
//							console.log('男')
//					} else if{oValue ==='male'}{
//							console.log('女')
//					} else if(oValue ==='other')
//							console.log('其他')
				}
//						
//					
					
				})
//			let oUsername = document.getElementsByName('username')
//			console.dir(oUsername[0].value)
//			let oUsernaeByid = document.getElementById('username')
//			console.dir(oUsernaeByid.value)
			}
		}
	</script>
</html>
